<template>
  <view class="like-container" @tap="toggleLike">
    <!-- 白色爱心 -->
    <image 
      :class="['unlike-img', { 'scale-down': isLike }]" 
      src="https://cdn.oss.bon-top.cn/static_bc/images/like.png"
      :style="{ transform: 'scale(' + unlikeScale + ')' }"
      :animation="unlikeAnimationData"
    />
    
    <!-- 红色爱心 -->
    <image 
      :class="['like-img', { 'scale-up': isLike }]" 
      src="https://cdn.oss.bon-top.cn/static_bc/images/like_act.png"
      :style="{ opacity: likeOpacity, transform: 'scale(' + likeScale + ')' }"
      :animation="likeAnimationData"
    />
    
    <!-- 圆环动画容器 -->
    <view class="circle-animation" v-if="showCircle"></view>
  </view>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
  duration: {
    type: Number,
    default: 0.5
  }
})

const isLike = ref(false)
const likeOpacity = ref(0)
const likeScale = ref(1)
const unlikeScale = ref(1)
const showCircle = ref(false)

// 创建动画实例
const unlikeAnimation = uni.createAnimation({
  duration: 300,
  timingFunction: 'ease-in-out'
})

const likeAnimation = uni.createAnimation({
  duration: 700,
  timingFunction: 'ease',
  transformOrigin: '50% 50%'
})

const unlikeAnimationData = reactive(unlikeAnimation.export())
const likeAnimationData = reactive(likeAnimation.export())

const toggleLike = async () => {
  isLike.value = !isLike.value
  const { duration } = props

  if (isLike.value) {
    // 第一阶段：缩小白色爱心
    unlikeAnimation.scale(0.1).step()
    Object.assign(unlikeAnimationData, unlikeAnimation.export())
    
    await new Promise(resolve => setTimeout(resolve, duration * 300))
    
    // 显示红色爱心
    likeOpacity.value = 1
    showCircle.value = true
    
    // 第二阶段：弹跳放大红色爱心
    likeAnimation.scale(1).step({ timingFunction: 'ease-out' })
    Object.assign(likeAnimationData, likeAnimation.export())
    
    // 圆环动画
    await new Promise(resolve => setTimeout(resolve, duration * 700))
    showCircle.value = false
  } else {
    // 取消点赞动画
    // likeAnimation.scale(0.1).step()
    // Object.assign(likeAnimationData, likeAnimation.export())
    
    // await new Promise(resolve => setTimeout(resolve, duration * 300))
    likeOpacity.value = 0
    unlikeAnimation.scale(1).step()
    // Object.assign(likeAnimationData, likeAnimation.export())
    Object.assign(unlikeAnimationData, unlikeAnimation.export())

    resetUnlike()
  }
}
const resetUnlike = () => {
  unlikeScale.value = 1
  // 强制触发视图更新
  setTimeout(() => unlikeAnimationData.value = {}, 10)
}
</script>

<style lang="scss">
.like-container {
  position: relative;
  width: 50px;
  height: 50px;
  
  .unlike-img, .like-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 或 cover 根据需求选择 */
    transition: transform 0.3s ease-in-out;
  }
  
  .like-img {
    opacity: 0;
  }
  
  .circle-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    height: 20%;
    border: 2px solid #ff3c3c;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: circleExpand 0.5s ease-out;
  }
}

@keyframes circleExpand {
  0% {
    width: 20%;
    height: 20%;
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
</style>